<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="行高">
      <a-input-number
        v-model="config.rowHeight"
        :min="20"
        :formatter="(value) => `${value}px`"
        :parser="(value) => value.replace('px', '')"
      />
    </a-form-model-item>
    <a-form-model-item label="高亮列">
      <a-switch v-model="config.columnIsCurrent" />
    </a-form-model-item>
    <a-form-model-item label="高亮行">
      <a-switch v-model="config.rowIsCurrent" />
    </a-form-model-item>
    <a-form-model-item label="斑马纹">
      <a-switch v-model="config.stripe" />
    </a-form-model-item>
    <a-form-model-item label="选择">
      <a-radio-group v-model="config.select">
        <a-radio value="checkbox"> 多选 </a-radio>
        <a-radio value="radio"> 单选 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="分页">
      <a-switch v-model="config.paging" />
    </a-form-model-item>
    <a-form-model-item label="边框">
      <a-radio-group v-model="config.border" button-style="solid">
        <a-radio-button :value="'default'"> 默认 </a-radio-button>
        <a-radio-button :value="'full'"> 完整 </a-radio-button>
        <a-radio-button :value="'outer'"> 外边框 </a-radio-button>
        <a-radio-button :value="'inner'"> 内边框 </a-radio-button>
        <a-radio-button :value="'none'"> 无边框 </a-radio-button>
      </a-radio-group>
    </a-form-model-item>
  </a-form-model>
</template>
    <script>
export default {
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    };
  },
  props: {
    config: {
      type: Object,
      default: {
        rowHeight: 40,
        paging: true,
        columnIsCurrent: true,
        rowIsCurrent: true,
        stripe: true,
        select: "checkbox",
        border: "full",
      },
    },
  },
  methods: {},
};
</script>
    